<template>
  <div class="header_wrapper">
    <ul class="category_nav">
      <li v-for="(item, index) in categoryDetail" :key="index"
        :class="{current: restaurant_category_ids == item.id || (!restaurant_category_ids) && index == 0}"
        @click="getCategoryIds(item.id, item.name)"
      >
        {{item.name}}
      </li>
    </ul>
    <div class="category_drop" @click="handleDropOpen">
      <span class="iconfont arrow">&#xe661;</span>
    </div>
    <transition name="showlist">
      <div class="category_container" v-show="open">
        <div class="top">
          <h3 class="title">请选择分类</h3>
          <div class="iconfont close_icon" @click="handleDropClose">&#xe615;</div>
        </div>
        <div class="filter_scroller">
          <div class="main_menu_con" ref="main_menu_con">
            <ul class="menu main_menu">
              <li v-for="(item, index) in category" :key="index"
                class="menu_item main_item_menu"
                :class="{active: restaurant_category_id == item.id}"
                @click="selectCategoryName(item.id, index)"
              >
                <span class="menu_name">{{item.name}}</span>
                <span :count="item.count" class="count">{{item.count}}</span>
              </li>
            </ul>
          </div>
          <div class="sub_menu_con" ref="sub_menu_con">
            <ul class="menu sub_menu" ref="sub_menu">
              <li v-for="(item, index) in categoryDetail" :key="index"
                class="menu_item sub_item_menu"
                :class="{active: restaurant_category_ids == item.id || (!restaurant_category_ids) && index == 0}"
                @click="getCategoryIds(item.id, item.name)"
              >
                <img :src="getImgPath(item.image_url)">
                <span class="menu_name">{{item.name}}</span>
                <span :count="item.count" class="count">{{item.count}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </transition>
    <transition name="showcover">
      <div class="mask" v-show="open" @click="handleDropClose"></div>
    </transition>
  </div>
</template>

<script>
import { getImgPath } from '@/assets/js/mixin'
export default {
  name: 'Category',
  data () {
    return {
      open: false
    }
  },
  props: ['category', 'categoryDetail', 'restaurant_category_id', 'restaurant_category_ids'],
  mounted () {
    // this.$nextTick(() => {
    //   if (!this.scroll) {
    //     this.scroll = new BScroll(this.$refs.main_menu_con, {
    //       click: true,
    //       scrollbar: {
    //         fade: true,
    //         interactive: false // 1.8.0 新增
    //       },
    //       mouseWheel: {
    //         speed: 20,
    //         invert: false,
    //         easeTime: 300
    //       }
    //     })
    //   } else {
    //     this.scroll.refresh()
    //   }
    // })
  },
  mixins: [getImgPath],
  methods: {
    handleDropOpen () {
      this.open = true
    },
    handleDropClose () {
      this.open = false
    },
    selectCategoryName (id, index) {
      this.$emit('select', id, index)
    },
    getCategoryIds (id, name) {
      this.open = false
      this.$emit('get', id, name)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .header_wrapper
    display: flex
    justify-content: space-between
    color: #fff
    line-height: .88rem
    background-image: linear-gradient(90deg, #0af, #0085ff)
    position: fixed
    top: 0
    width: 100%
    z-index: 999
    .category_nav
      display: flex
      flex: 1
      padding 0 0 0 .3rem
      white-space: nowrap
      /*设置横向滚动*/
      overflow-x: scroll
      /*禁止纵向滚动*/
      overflow-y: hidden
      /*文本平铺*/
      text-align: justify
    .category_nav li
      height: .5rem
      line-height: .5rem
      margin:.2rem .56rem 0 0
      color: #fff
      opacity: .7
      font-size: .28rem
    .category_nav li.current
      font-weight: 700
      opacity: 1
      border-bottom: .03rem solid #fff
    .category_drop
      width: .9rem
      text-align: center
    .category_container
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 60vh
      z-index: 999
      padding-bottom: 0
      color: #666
      background: #f9f9f9
      .top
        display: flex
        align-items: center
        justify-content: space-between
        padding: 0 .15rem 0 .3rem
        height: .8rem
        .title
          flex: 1
          font-size: .28rem
          font-weight: 700;
          color: #333
        .close_icon
          width: .6rem
          height: .6rem
          line-height: .6rem
          font-size: .4rem
          text-align: center
          color: #999
      .filter_scroller
        display: flex
        height: 100%
        background-color: #fff
        .main_menu_con
          width: 2.6rem
          overflow: auto
          position: relative
          -webkit-overflow-scrolling: touch
        .main_menu
          width: 2.6rem
          background-color: #fcfcfc
          .main_item_menu
            padding-right: .2rem
            border-right: 1px solid #f9f9f9
          .main_item_menu.active
            background-color: #fff
            border-right-width: 0
          .main_item_menu .menu_name
            flex: 1
            position: relative
            padding-left: .4rem
            font-size: .28rem
            line-height: .4rem
          .main_item_menu.active .menu_name:before
            content: ""
            position: absolute
            top: 0
            left: 0
            width: .08rem
            height: .4rem
            background-color: #2395ff
        .sub_menu_con
          flex: 1
          overflow: auto
          position: relative
          -webkit-overflow-scrolling: touch
        .sub_menu
          padding: 0 .3rem 0 .42rem
          .menu_name
            flex: 1
            position: relative
            font-size: .28rem
            line-height: .4rem
          .sub_item_menu.active .menu_name
            color: #2395ff
            font-weight: 700
          .sub_item_menu.active .count
            background-color: #2395ff
            border-color: #2395ff
            color: #fff
            font-weight: 700
        .sub_menu img
          width: .74rem
          height: .74rem
          margin-right: .26rem
          background: #fff
        .menu_item
          display: flex
          justify-content: space-between
          align-items: center
          height: .96rem
          line-height: .96rem
          .count
            position: relative
            width: .62rem
            height: .27rem
            font-size: 0
            border: 1px solid #eee
            border-radius: .2rem
            color: #999
            &:after
              content: attr(count)
              position: absolute
              top: 0
              left: 0
              width: 1.2rem
              line-height: .5rem
              font-size: .38rem
              text-align: center
              border-radius: .2rem
              transform-origin: left top
              transform: scale(.5)
              ellipsis()
    .mask
      position: fixed
      left: 0
      right: 0
      top: 0
      bottom: 0
      z-index: 3
      background: rgba(0, 0, 0, .5)
      backdrop-filter: blur(.1rem)
    .showcover-enter-active,
    .showcover-leave-active
      transition: opacity 0.3s
    .showcover-enter,
    .showcover-leave-active
      opacity: 0
    .showlist-enter-active,
    .showlist-leave-active
      transition: all 0.3s
      transform: translateY(0)
    .showlist-enter,
    .showlist-leave-active
      opacity: 0
      transform: translateY(-100%)
</style>
